<template>
	<view class="hx-store" @touchstart="touchStart">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<!-- 只需要绑定购物车位置即可 -->
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
		<!-- 头部 -->
		<view class="header">
			<view class="left">
				<image v-if="storeData.logo_image" :src="adminImgPath+storeData.logo_image" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="tit">{{storeData.name}}</view>
				<view class="row">营业时间：{{storeData.business_hours_start_times}}~{{storeData.business_hours_end_times}}
				</view>
				<view class="row">月售：{{storeData.sale_count}}</view>
				<view class="tag-box">
					<view class="tag-column" v-for="(tag, index) in storeData.json" :key="index">{{tag.intro}}</view>
				</view>
			</view>
		</view>
		<view class="notice text-ellipsis-more" v-if="storeData.notice"><text style="font-weight: 600;padding-right: 16rpx;">店铺公告:</text>{{storeData.notice}}</view>
		<!-- 主体 -->
		<view class="main" :style="{height: mainHeight}">
			<!-- <view class="" :style="{display:showZz}" style="position: absolute;top: 0;bottom: 0;left: 0;width: 100%; background: #3F536E;z-index: 999;opacity: 0.5;">
				遮罩 
			</view> -->
			<view class="tabs-box" :style="{'background-color':'rgba(245,245,245,'+ navSearchBgOpacity +')'}">
				<view style="height: 100%;">
					<view class="hx-tabs">
						<view class="hx-tabs-item" v-for="(item,i) in tabs" :key="i"
							:class="{'hx-tabs-active': swiperCurrent == i}" @click="swiperChange(i)"
							:style="{transition: transtionTime + 'ms'}">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<swiper id="mainSwiper" style="height: 100%;" :current="swiperCurrent" :duration="transtionTime"
				@transition="transition" @animationfinish="animationfinish">
				<!-- 购物 -->
				<swiper-item class="swiper-item">
					<view class="scroll-items">
						<view class="category-list">
							<!-- 左侧分类导航 -->
							<scroll-view :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll" class="left">
								<view v-for="item in categoryList" :key="item.id" class="row"
									:class="{active: item.id == menuCurrentId}" @click="showCategory(item)">
									<view class="text">
										{{item.name}}
									</view>
									<view class="row-number" v-if="item.number">
										{{item.number}}
									</view>
								</view>
							</scroll-view>
							<!-- 右侧子导航 -->
							<scroll-view scroll-with-animation :scroll-y="goodsBoxScroll" class="right"
								@scroll="asideScroll" :scroll-top="tabScrollTop">
								<view class="goodsListBox">
									<view class="category" v-for="item in categoryList" :key="item.id"
										:id="'goodsBox'+item.id">
										<view class="s-item">{{item.name}}</view>
										<view class="list">
											<view class="box" v-for="(rowData,i) in goodsList" :key="rowData.id" v-if="item.id == rowData.category_id">
												<!-- 商品列表 -->
												<!-- <m-store-pro @touchOnGoods="touchOnGoods" :rowData="box"></m-store-pro>
													 -->
												<!-- 商品列表 -->
												<view class="m-store-item" @click="hrefGoodsInfo(i)">
													<view class="m-img">
														<image style="width: 100%;height: 100%;" :src="adminImgPath+rowData.image"
															mode="aspectFit"></image>
													</view>
													<view class="m-text">
														<view class="m-title">
															{{rowData.name}}
														</view>
														<view class="m-descripe">
															{{rowData.introduction}}
														</view>
														<view class="m-bottom">
															<block v-if="rowData.form">
																<view class="m-price-box">
																	<view class="symbol">￥</view>
																	<view class="m-price">{{rowData.form_child[0].price}}
																	</view>
																	<view class="m-old-price"
																		v-if="rowData.form_child[0].oldprice">
																		<text>￥{{rowData.form_child[0].oldprice}}</text>
																	</view>
																</view>
															</block>
															<block v-else>
																<view class="m-price-box">
																	<view class="symbol">￥</view>
																	<view class="m-price">{{rowData.price}}</view>
																	<view class="m-old-price" v-if="rowData.oldprice">
																		<text>￥{{rowData.oldprice}}</text>
																	</view>
																</view>
															</block>
															<view class="m-distance" @click.stop>
																<block v-if="rowData.form">
																	<view class="miniBtn" @click="showForm(rowData)">
																		<text>选规格</text>
																		<!-- #ifdef APP-PLUS || H5 -->
																		<view class="num" v-if="getCartGoodsNum(rowData)">
																			{{getCartGoodsNum(rowData)}}</view>
																		<!-- #endif -->
																	</view>
																</block>
																<block v-else>
																	<view :class="'addEle_' + i" class="jumpPosition">
																	</view>
																	<view class="numbox">
																		<view class="numbox-minus" @click="calcValue('minus',rowData,'.addEle_' + i)" v-if="rowData.number>0">
																			<image src="/static/supermarket/icon_sub.png" mode="aspectFit"></image>
																		</view>
																		<view class="numbox-value" v-if="rowData.number>0">{{rowData.number}}</view>
																		<view class="numbox-plus" @click="calcValue('plus',rowData,'.addEle_' + i)">
																			<image src="/static/supermarket/icon_add.png" mode="aspectFit"></image>
																		</view>
																	</view>
																</block>
																<!-- <image @click="touchOnAddGoods('.addEle_' + i,rowData)" style="width:20px;height: 20px;" src="../../static/img/icon/shop_icon_buy.png" mode="aspectFit"></image>
																 -->
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</swiper-item>
				<!-- 商家 -->
				<swiper-item class="swiper-item">
					<scroll-view :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll" class="scroll-items business-box" style="height: 100%;">
						<view style="width: 100%;height: 27rpx;"></view>
						<view class="info-list">
							<view class="info-list-container" style="display: flex;align-items: center;">
								<image style="height:43rpx" src="/static/supermarket/icon_lt.png" mode="heightFix"></image>
								<text style="margin-left: 14rpx;flex:1;">{{ storeData.address }}</text>
							</view>
						</view>
						<view class=" info-list hx-mt-15">
							<view class="info-list-container" style="display: flex;align-items: center;">
								<image style="height:43rpx" src="/static/supermarket/icon_phone.png" mode="heightFix"></image>
								<text style="margin-left: 14rpx;flex: 1;">{{ storeData.phone }}</text>
								<view class="right" style="display: flex;align-items: center;" @click="toTel()">
									<text>拨打</text>
									<image style="height:43rpx;margin-left: 14rpx;" src="/static/supermarket/icon_tel.png" mode="heightFix"></image>
								</view>
							</view>
						</view>
						<view class=" info-list hx-mt-15">
							<scroll-view scroll-x class="scroll-img">
								<image class="column" :src="adminImgPath + item" mode="aspectFill" v-for="(item,index) in storeData.imgList" :key="index"></image>
							</scroll-view>
						</view>
						<view class="info-list" style="margin-bottom: 27rpx;padding-top: 0;">
							<view class="info-list-container" style="display: flex;align-items: center;">
								<mp-html :content="storeData.content" />
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 购物车 -->
		<view class="foot" @touchmove.stop.prevent="mpClear" :style="{height: footHeight}" v-if="showFoot">
			<view class="zz" @click="hideShoppingCar"></view>
			<view class="btn-box">
				<view class="btn-box-left" @click="showShoppingCar">
					<view class="cart" :animation="cartAnimationData">
						<view class="tag cartNum" v-if="goodsTotalNumber>0">{{goodsTotalNumber}}</view>
						<image id="cart" src="/static/supermarket/icon_shop.png" mode="aspectFit">
						</image>
					</view>
					<view class="priceBox">
						<view class="hx-txt-18 hx-color-white">
							￥{{goodsTotalPrice||'0.00'}}
						</view>
					</view>
				</view>
				<view class="btn-box-right">
					<!-- <view class="jiesuan" v-if="goodsTotalPrice>0 && goodsTotalPrice >= 15" @click="jiesuan"> -->
					<view class="jiesuan" @click="jiesuan" v-if="goodsTotalPrice>0">
						去结算
					</view>
					<!-- <view class="pscj hx-txt-10 hx-color-gray" v-else>
						<text v-if="15>0">差￥{{-(goodsTotalPrice-15)}}起送</text>
					</view> -->
				</view>
			</view>
			<view class="cart-box" :style="{display: showCar ? 'flex' : 'none'}">
				<view class="box-container operating-box">
					<view class="operating-box_right">
						
					</view>
					<view class="operating-box_left clear" @click="clearShoppingCart">
						<i class="hxicon-delete"></i>
						<text>清空购物车</text>
					</view>
				</view>
				<view class=" goods-box">
					<view class="" style="flex: 1;">
						<scroll-view scroll-y="true" class="goods-list-scroll" :scroll-top="carGoodsScrollTop">
							<view class="goods-list">
								<view class="box" v-for="(rowData,i) in shoppCart" :key="rowData.id" v-if="rowData.number>0">
									<view class="m-store-item">
										<view class="m-img">
											<image style="width: 100%;height: 100%;" :src="adminImgPath+rowData.image"
												mode="aspectFit"></image>
										</view>
										<view class="m-text">
											<view class="m-title">
												{{rowData.name}}
											</view>
											<view class="m-descripe">

												{{rowData.current_form ? rowData.form.name + "：" + rowData.current_form.name : rowData.introduction}}
											</view>
											<view class="m-bottom">
												<view class="m-price-box">
													<view class="symbol">￥</view>
													<view class="m-price">{{rowData.price}}</view>
													<view class="m-old-price" v-if="rowData.oldprice">
														<text>￥{{rowData.oldprice}}</text>
													</view>
												</view>
												<view class="m-distance">
													<view :class="'addEle2_' + rowData.id" class="jumpPosition">
													</view>
													<view class="numbox">
														<view class="numbox-minus" @click="calcValue('minus',rowData,'.addEle2_' + rowData.id)" v-if="rowData.number>0">
															<image src="/static/supermarket/icon_sub.png" mode="aspectFit"></image>
														</view>
														<view class="numbox-value" v-if="rowData.number>0">{{rowData.number}}</view>
														<view class="numbox-plus" @click="calcValue('plus',rowData,'.addEle2_' + rowData.id)">
															<image src="/static/supermarket/icon_add.png" mode="aspectFit"></image>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="goodsDet" type="center">
			<view class="goods-details">
				<scroll-view style="max-height: 620rpx;" scroll-y="true" scroll-left="20">
					<image class="popup-img" v-if="goodsDetails.image" :src="adminImgPath+goodsDetails.image" mode="aspectFit"></image>
					<view class="popup-top">
						<view class="popup-title">{{goodsDetails.name}}</view>
						<view style="display: flex;">
							<view class="popup-sale" style="padding-right: 16rpx;">库存：{{goodsDetails.stock}}</view>
							<view class="popup-sale" style="padding-right: 16rpx;" v-if="goodsDetails.is_quota == 1">限购：{{goodsDetails.quota_number}}</view>
							<view class="popup-sale">月售：{{goodsDetails.sale_count}}</view>
						</view>
						<mp-html class="popup-cont" :content="goodsDetails.content" />
					</view>
				</scroll-view>
				<view class="popup-bottom">
					<view class="popup-price">{{goodsDetails.price}}元/{{goodsDetails.unit}}</view>
					<view class="addEle3 jumpPosition">
					</view>
					<view class="numbox">
						<view class="numbox-minus" @click="calcValue('minus',goodsList[goodsDetails.index],'.addEle3')" v-if="goodsList[goodsDetails.index].number>0">
							<image src="/static/supermarket/icon_sub.png" mode="aspectFit"></image>
						</view>
						<view class="numbox-value" v-if="goodsList[goodsDetails.index].number>0">{{goodsList[goodsDetails.index].number}}</view>
						<view class="numbox-plus" @click="calcValue('plus',goodsList[goodsDetails.index],'.addEle3')">
							<image src="/static/supermarket/icon_add.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- v-if="showFormBox" -->
		<!-- 多规格 -->
		<!-- <uni-popup ref="popup" type="center" @change="popupChange">
			<view class="form-main" v-if="currentGoodsData.name">
				<view class="form-main_ctn" @click.stop.prevent="mpClear">
					<view class="godos_tit"><text>{{currentGoodsData.name}}</text></view>

					<view class="gg_tit">
						<text>{{currentGoodsData.form.name}}</text>
					</view>
					<view class="gg_box">
						<block v-for="form_child in currentGoodsData.form_child" :key="form_child.id"
							v-if="form_child.pid == currentGoodsData.form.id">
							<view class="item" :class="{'active': form_child.select}"
								@click="selectGoodsForm(currentGoodsData,form_child)">{{form_child.name}}</view>
						</block>
					</view>

					<view class="select_gg">
						<text class="lable">已选规格：</text>
						<view class="select_gg_box">
							<block v-for="form_child in currentGoodsData.form_child" :key="form_child.id"
								v-if="form_child.select == true">
								<view class="gg-item">
									<text>{{form_child.name}} </text>
									<text class="gg-item-cut">,</text>
								</view>
							</block>
						</view>
					</view>

					<view class="bottom">
						<view class="price_box">
							<text>￥</text>
							<block v-for="(form_child,i) in currentGoodsData.form_child" :key="i"
								v-if="form_child.select == true">
								<text class="price">{{form_child.price}}</text>
							</block>
						</view>
						<view class="form-btn-box">
							<block v-if="!currentGoodsData.number">
								<view id="ggAddBtn" class="add-btn" @click="formFirstAddGoods()">
									<i class="hxicon-add" id="eleAdd"></i>
									<text>加入购物车</text>
								</view>
							</block>
							<block v-else>
								<view class="addEle_gg jumpPosition"></view>
								<hx-number-box @change="formAddGoodsChange" :value="currentGoodsData.number"
									:rowData="currentGoodsData" :clickTime="animaTime + 200"
									@addChange="touchOnAddGoods('.addEle_gg',currentGoodsData)"></hx-number-box>
							</block>
						</view>

					</view>
				</view>
				<view class="close" @click="hiddenForm()">
					<i class="hxicon-close"></i>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import mpHtml from '@/pages/Component/Public/mp-html/components/mp-html/mp-html.vue';
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import ikz from '@/pages/Common/tools.js';
	import uniIcons from '@/pages/Component/supermarket/component/uni-icons/uni-icons.vue';
	import jumpBall from '@/pages/Component/supermarket/component/hx-jump-ball/hx-jump-ball.vue';
	import hxNumberBox from "@/pages/Component/supermarket/component/uni-number-box/uni-number-box.vue";
	//  加入购物车动画组件
	import flyInCart from '@/pages/Component/supermarket/component/flyInCart.vue'

	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

	export default {
		components: {
			jumpBall,
			uniIcons,
			hxNumberBox,
			flyInCart,
			mpHtml,
			ikzLoading
		},
		data() {
			return {
				id: 0,
				adminImgPath: getApp().globalData.adminImgPath,
				loading_css: {
					display: 'flex',
				},
				pageScroll: {},
				//商家信息
				storeData: [],
				//商品列表
				goodsList: [],
				// 是否限购
				is_quota:'',
				// 限购数量
				quota_number:'',
				//商品分类信息列表
				categoryList: [],
				//评论列表
				commentList: [],
				// 商品详情
				goodsDetails: "",
				navSearchWidth: 3,
				navSearchBgOpacity: 0,
				navSearchColor: '#ffffff',
				navHeadHeight: 44,
				//默认禁止商品栏滚动
				goodsBoxScroll: true,
				statusBarHeight,
				//动画时间
				animaTime: 300,
				//商家盒子高度
				storeInfoBoxHeight: 100,
				//展开门店信息容器
				showStoreBox: false,

				num: 1,
				element: [],
				cartAnimation: {},
				cartAnimationData: {},

				//tabs
				tabs: [{
						name: '购物'
					},
					{
						name: '商家'
					},
				],
				swiperCurrent: 0,
				dx: 0,
				swiperCurrentSliderLeft: 0,
				transtionTime: 100,

				//所有购物车
				//显示购物车
				showFoot: true,

				//配送费
				shippingDees: 0,
				//配送起步价
				startingPrice: 0,

				//购物车商品价格合计
				goodsTotalPrice: 0,
				//购物车商品数量合计
				goodsTotalNumber: 0,
				//当前门店购物车
				shoppCart: [],
				//foot 高度
				footHeight: '0',
				//显示购物车
				showCar: false,
				//购物车中商品滚动条位置
				carGoodsScrollTop: 0,
				//购物车缓存 Storage 名称
				shoppingCartStorageName: 'shopping_cart',

				sizeCalcState: false,
				tabScrollTop: 0,

				mainHeight: 0,
				menuCurrentId: 0,


				//购物车显示折扣
				showDiscount: true,
				//手指触摸滑动
				touchData: {},
				//页面滚动条距离顶部的距离
				pageScrollTop: 0,

				menuScrollTop: 0,

				//多规格当前产品
				currentGoodsData: {},
				//显示规格容器
				showFormBox: false,
				//显示规格动画
				formAnimationData: {},

				//购物车位置数据
				cartBasketRect: {},

				navStatus: true,
				isBack: true,
				number: 0
			}
		},
		async onLoad(option) {
			if(!option) {
				return
			}
			const that = this
			this.id = option.id
		},
		onShareAppMessage() {
			return {
				title: app.globalData.share_info.share_title,
				path: '/pages/Component/supermarket/Program/store/index?id='+this.id,
				imageUrl: app.globalData.share_info.share_img,
			}
		},
		onReady() {
			const that = this
			let sysInfo = uni.getSystemInfoSync();
			//屏幕高度 - 头部导航高度 - 状态栏高度 - 分页高度
			this.mainHeight = sysInfo.screenHeight - 43 - statusBarHeight - 40 + 'px';
		},
		onBackPress(event) {
			if (this.showFormBox) {
				this.hiddenForm()
				return true
			}
			if (!this.isBack) {
				this.$refs.popup.close()
				return true
			}
		},
		onShow() {
			this.getStoreDet()
			this.getGoodsList()
		},
		mounted() {
			let that = this
		},
		watch: {
			showStoreBox(val, oldVal) {
				if (val == true) {

					this.showStoreBoxFunc();
				} else {
					this.hiddenStoreBoxFunc();
				}
			}
		},
		onPageScroll(e) {
			let that = this
			let top = e.scrollTop
			that.pageScrollTop = e.scrollTop
			that.pageScroll = e

			if (top < 120) {
				if (that.navSearchWidth >= 3) {
					if (top < 3) {
						that.navSearchWidth = 3
						that.navSearchBgOpacity = 0
						that.navSearchColor = '#ffffff'
					} else {
						let n = top * (120 / 100)
						if (n > 100) {
							n = 100
						}
						that.navSearchWidth = n
						//that.navSearchBgOpacity =1
						that.navSearchBgOpacity = top * (1 / 100)
						that.navSearchColor = '#888888'
					}
				}
			} else {
				that.navSearchWidth = 100
				that.navSearchBgOpacity = 1
				that.navSearchColor = '#888888'
			}

			let view = uni.createSelectorQuery().select(".main");
			view.fields({
				rect: true
			}, data => {
				if (data != null) {
					if (data.top <= statusBarHeight + 44) {
						that.goodsBoxScroll = true
					} else {
						that.goodsBoxScroll = true
					}
				}

			}).exec();
		},
		methods: {
			// 获取商家详情
			getStoreDet() {
				var path = '/xyb/supermarket/index/business_detail';
				var data = {
					id: this.id
				};
				ikz.requestPost(path, data, res => {
					console.log("获取商家详情", res)
					if (res.data.code) {
						//商家信息
						this.storeData = res.data.data
						this.storeData.store_id = this.id
						if(res.data.data.environment_images) {
							this.storeData.imgList = res.data.data.environment_images.split(',')
						}
						this.categoryList = res.data.data.goods_category
						if(this.categoryList.length) {
							this.menuCurrentId = this.categoryList[0].id;
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				})
			},
			// 获取商品列表
			getGoodsList() {
				var path = '/xyb/supermarket/index/all_goods';
				var data = {
					business_id: this.id
				};
				ikz.request(path, data, res => {
					console.log("获取商品列表", res)
					this.showLoading = false
					uni.hideLoading()
					if (res.data.code) {
						this.goodsList = res.data.data.data
						for(let i in this.goodsList) {
							this.goodsList[i].number = 0
						}
						let q = uni.createSelectorQuery()
						setTimeout(()=>{
							this.calcSize()
							q.select('#cart').boundingClientRect(data => {
								this.cartBasketRect = data
							}).exec();
							this.init();
						},100)
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					this.loading_css.display = 'none';
				})
			},
			// 拨打电话
			toTel(){
				uni.makePhoneCall({
					phoneNumber: this.storeData.phone
				})
			},
			init() {
				let that = this;
				let goods = that.goodsList;
				//商品初始化
				// for(let i in goods){
				// 	goods[i].purchases = 3
				// }
				that.shoppCart = []
				let carts = uni.getStorageSync(that.shoppingCartStorageName) || [];
				//根据缓存数据 获取购物车中属于本商店的商品
				for (let i in carts) {
					if (carts[i].store_id == that.storeData.store_id) {
						that.shoppCart = carts[i].shopping_cart ? carts[i].shopping_cart : [];
						break;
					}
				}
				that.goodsTotalPrice = 0;
				that.goodsTotalNumber = 0;
				for (let i in that.shoppCart) {
					for (let j in goods) {
						if (goods[j].id == that.shoppCart[i].id) {
							goods[j].number = that.shoppCart[i].number
						}
					}
					//计算商品总价
					that.goodsTotalPrice += that.shoppCart[i].total
					//商品总数量
					that.goodsTotalNumber += that.shoppCart[i].number
				}
				that.goodsTotalPrice = Number(that.goodsTotalPrice).toFixed(2)
				//初始化商品列表
				that.goodsList = goods;

				//初始化起步价和配送费
				that.starting_price = that.storeData.starting_price;
				that.shipping_dees = that.storeData.shipping_dees;

				that.setLabelNumber();
			},
			navBack() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					// #ifdef H5
					history.back()
					// #endif
					// #ifndef H5
					uni.reLaunch({
						url: '/pages/index/index'
					});
					// #endif
				}
			},
			popupChange(e) {
				this.isBack = !e.show
			},
			//显示 规格
			showForm(goods) {
				var that = this;
				let goodsCart = that.getStoreCart();

				if (goodsCart) {
					let currentGoods = null
					for (let i in goodsCart) {
						if (goodsCart[i].id == goods.id) {
							currentGoods = goodsCart[i]
							break
						}
					}
					if (currentGoods) {
						let selectStatus = false
						for (let i in goods.form_child) {
							if (goods.form_child[i].id == currentGoods.current_form.id) {
								if (!selectStatus) {
									goods.form_child[i].select = true
									goods.number = currentGoods.number
									selectStatus = true
								} else {
									goods.form_child[i].select = false
								}
							} else {
								goods.form_child[i].select = false
							}
						}
					}

				}
				that.currentGoodsData = goods
				that.$refs.popup.open()
			},
			//隐藏规格
			hiddenForm() {
				this.$refs.popup.close();
			},
			formFirstAddGoods() {
				let that = this
				that.formAddGoodsChange(1, that.currentGoodsData)
				that.touchOnAddGoods('#ggAddBtn', that.currentGoodsData)
			},
			//加入购物车
			formAddGoodsChange(number, goodsData) {
				let that = this;
				if (number >= 1) {
					for (let i in goodsData.form_child) {
						if (goodsData.form_child[i].select == true) {
							that.currentGoodsData.current_form = goodsData.form_child[i]
							break
						}
					}
				}
				that.addGoodsChange(number, that.currentGoodsData)
			},
			//选择规格
			selectGoodsForm(goods, formChild) {
				let that = this
				let data = goods.form_child
				let n = 0
				for (var i in data) {
					if (data[i].id == formChild.id) {
						data[i].select = true
					} else {
						data[i].select = false
					}
				}
				let goodsCart = that.getStoreCart();
				if (goodsCart) {
					for (let i in goodsCart) {
						if (goodsCart[i].id == goods.id && goodsCart[i].current_form.id == formChild.id) {
							n = goodsCart[i].number
							break;
						}
					}
				}

				goods.number = n
				this.currentGoodsData = goods
			},
			//获取该商品在购物车的数量
			getCartGoodsNum(goods) {
				let cart = this.getStoreCart()
				let n = 0
				if (cart) {
					for (let i in cart) {
						if (cart[i].id == goods.id) {
							n += cart[i].number
						}
					}
				}
				return n
			},
			//获取门店购物车
			getStoreCart() {
				const that = this
				return that.shoppCart
			},
			swiperChange(index) {
				this.swiperCurrent = index;
				this.swiperCurrentSliderLeft = 70 * index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				// this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				/* this.$refs.tabs.setFinishCurrent(current); */
				this.swiperCurrent = current;
				this.current = current;
				this.swiperChange(current);
				this.showFoot = current == 0 && this.showStoreBox != true ? true : false;

			},
			//一级分类点击
			showCategory(item) {
				const that = this
				that.isBoxScroll = true;
				that.menuCurrentId = item.id;
				setTimeout(() => {
					let index = that.categoryList.findIndex(sitem => sitem.id === item.id);
					that.tabScrollTop = that.categoryList[index].top;
					that.isBoxScroll = false
				}, 100)
			},
			//右侧栏滚动
			asideScroll(e) {
				const that = this;
				const scrollTop = Math.round(e.detail.scrollTop);
				that.calcSize()
				const tabs = that.categoryList.filter(item => item.top <= scrollTop).reverse();

				if (tabs.length > 0) {
					that.menuCurrentId = tabs[0].id;
				}
				const menuNum = that.categoryList.length
				const cNum = tabs.length
				// 定位在第4个分类，当分类滑动到第4格时将不再变换位置。
				const n = 4
				if (cNum > n) {
					that.menuScrollTop = (cNum - n) * 45
				} else {
					that.menuScrollTop = 0
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize(event) {
				let h = 0;
				// if(this.sizeCalcState){
				// 	return false
				// }
				this.categoryList.forEach(item => {
					let view = uni.createSelectorQuery().select("#goodsBox" + item.id);
					view.fields({
						size: true
					}, data => {
						if (data != null) {
							item.top = h;
							h += Math.round(data.height);
							item.bottom = h;
						}

					}).exec();
				})
				this.sizeCalcState = true;
			},
			//小球跳跃动画
			touchOnAddGoods(ele, data) {
				const that = this;
				let q = uni.createSelectorQuery()
				q.select(ele).boundingClientRect(res => {
					that.$refs.inCart.addToCart(res, data.id);
				}).exec();

			},
			// 增减按钮
			calcValue(type,datas,ele) {
				console.log("传过来的值是",datas);
				if(type == "minus") {
					this.addGoodsChange(--datas.number, datas)
				} else {
					// is_quota = 1 为限购
					if(datas.is_quota == 1 && datas.quota_number == datas.number){
						uni.showToast({
							title:"商品已达到最大购买量",
							icon:"none"
						})
						return
					}
					this.addGoodsChange(++datas.number, datas)
					this.touchOnAddGoods(ele,datas)
				}
			},
			//新增商品计算价格
			addGoodsChange(number, rowData) {
				number = Number(number)
				var that = this;
				let shoppCart = [];
				let totalPrice = 0;
				let totalNumber = 0;
				let existedGoods = false;
				//门店第一次添加商品
				let isFirstAddGoods = true;
				//是否为有规格的商品
				let isFormGoods = false
				if (rowData.current_form) {
					isFormGoods = true
				}
				let deleteGoods = null
				let carts = uni.getStorageSync(that.shoppingCartStorageName) || [];
				if (carts.length != 0) {
					//根据缓存数据 获取购物车中属于本商店的商品
					for (let i in carts) {
						if (carts[i].store_id == that.storeData.store_id) {
							shoppCart = carts[i].shopping_cart ? carts[i].shopping_cart : [];
							isFirstAddGoods = false
							break;
						}
					}
					//检查该商品是否为第一次添加，
					for (var i in shoppCart) {
						// if(shoppCart[i].id == rowData.id){
						// 	// 是多规格商品
						// 	if(isFormGoods){
						// 		//规格相同
						// 		if(shoppCart[i].current_form.id == rowData.current_form.id){
						// 			//数量为0，在购物车中移除该商品
						// 			if(number <= 0){
						// 				deleteGoods = shoppCart[i];
						// 				break;
						// 			}else{
						// 				// 直接修改商品数量，并计算出单品合计
						// 				shoppCart[i].price = rowData.current_form.price
						// 				shoppCart[i].oldprice = rowData.current_form.oldprice
						// 				shoppCart[i].total = number *  rowData.current_form.price
						// 			}

						// 		}
						// 	}else{
						// 		// 不是多规格商品
						// 	}
						// }
						
						if (shoppCart[i].id == rowData.id) {
							if (isFormGoods) {
								//相同商品比较规格是否也相同
								if (shoppCart[i].current_form.id == rowData.current_form.id) {
									existedGoods = true;
								}
							} else {
								existedGoods = true;
							}
							if (existedGoods) {
								//在购物车中移除该商品
								if (number <= 0) {
									deleteGoods = shoppCart[i];
									break;
								}
								//非第一次添加，直接修改商品数量，并计算出单品合计
								if (isFormGoods) {
									shoppCart[i].price = rowData.current_form.price
									shoppCart[i].oldprice = rowData.current_form.oldprice
									shoppCart[i].total = number * rowData.current_form.price
								} else {
									shoppCart[i].price = rowData.price
									shoppCart[i].total = number * rowData.price
									shoppCart[i].oldprice = rowData.oldprice
								}
								shoppCart[i].number = rowData.number = number
								break;
							}
						}
					}
				}
				//在购物车中移除该商品
				if (deleteGoods != null) {
					if (carts) {
						//根据缓存数据 获取购物车中属于本商店的商品
						for (let i in carts) {
							if (carts[i].store_id == that.storeData.store_id) {
								var index = shoppCart.indexOf(deleteGoods);

								if (index > -1) {
									shoppCart.splice(index, 1);
								}
								carts[i].shopping_cart = shoppCart
								uni.setStorageSync(that.shoppingCartStorageName, carts);
								break;
							}
						}
						setTimeout(() => {
							this.init();
						}, 100)
					} else {
						that.storeData.shopping_cart = []
						uni.setStorageSync(that.shoppingCartStorageName, that.storeData);
					}
				}

				//第一次添加
				if (!existedGoods) {
					if (rowData.form) {
						rowData.price = rowData.current_form.price
						rowData.oldprice = rowData.current_form.oldprice
						rowData.total = number * rowData.current_form.price
					} else {
						rowData.total = number * rowData.price
					}
					rowData.number = number;
					shoppCart.push(rowData);
				}

				//计算总商品数量和总价
				for (var i in shoppCart) {
					//总价
					totalPrice += shoppCart[i].total
					totalNumber += shoppCart[i].number
				}
				//更改商品列表中的已购买数量
				for (let i in that.goodsList) {
					if (that.goodsList[i].id == rowData.id) {
						that.goodsList[i] = rowData
						break;
					}
				}

				that.goodsTotalPrice = Number(totalPrice).toFixed(2)
				that.goodsTotalNumber = totalNumber

				that.shoppCart = shoppCart;
				that.storeData.shopping_cart = shoppCart;

				that.setLabelNumber();
				if (isFirstAddGoods) {
					carts.push(that.storeData)
				}
				if (that.goodsTotalNumber == 0) {
					that.hideShoppingCar();
				}
				for (let i in carts) {
					if (!carts[i].shopping_cart.length) {
						carts.splice(i,1)
					}
				}
				//购物车商品数据缓存至本地
				uni.setStorageSync(that.shoppingCartStorageName, carts);
			},
			//计算每类商品购买的总数
			setLabelNumber() {
				let that = this;
				//计算每一类购买商品的总数量
				for (let j in that.categoryList) {
					let n = 0;
					for (var i in that.shoppCart) {
						if (that.shoppCart[i].category_id == that.categoryList[j].id) {
							n += that.shoppCart[i].number;
						}
					}
					that.categoryList[j].number = n;
				}
			},
			//去结算
			jiesuan() {
				if(!uni.getStorageSync("user_info")) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				}
				// if(!getApp().globalData.mobile) {
				// 	uni.navigateTo({
				// 		url: "/pages/login/index"
				// 	})
				// 	return
				// }
				this.navTo("/pages/Component/supermarket/Program/store/order?id=" + this.id)
			},
			navTo(url) {
				let that = this;
				if (that.navStatus) {
					that.navStatus = false
					uni.navigateTo({
						url: url,
						complete: function() {
							that.navStatus = true
						}
					})
				}
			},
			//联系商家
			contact() {
				uni.showModal({
					title: "",
					content: "联系商家"
				})
			},
			showStoreBoxFunc() {
				this.storeInfoBoxHeight = uni.getSystemInfoSync().screenHeight - 136;
				this.$set(this.$data, 'showFoot', false);
				this.showStoreBox = true;
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				})
			},
			hiddenStoreBoxFunc() {
				this.storeInfoBoxHeight = 100;
				this.showStoreBox = false;
				if (this.swiperCurrent == 0) {
					this.$set(this.$data, 'showFoot', true);
				}
			},
			mpClear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation()
			},
			//显示购物车
			showShoppingCar() {
				if (this.goodsTotalNumber == 0) {
					return;
				}
				this.footHeight = '100%';
				this.showCar = true;
				this.carGoodsScrollTop = 0;
			},
			//隐藏购物车
			hideShoppingCar() {
				this.footHeight = '0';
				this.showCar = false;
			},
			//清空该门店的购物车
			clearShoppingCart() {
				let that = this;
				that.shoppCart = [];
				that.storeData.shopping_cart = [];
				let shoppingCartAll = uni.getStorageSync(that.shoppingCartStorageName) || [];
				for (let i in shoppingCartAll) {
					if (shoppingCartAll[i].store_id == that.storeData.store_id) {
						shoppingCartAll.splice(i,1)
					}
				}
				uni.setStorageSync(that.shoppingCartStorageName, shoppingCartAll);

				for (let i in that.goodsList) {
					that.goodsList[i].number = 0;
				}
				for (let i in that.categoryList) {
					that.categoryList[i].number = 0;
				}
				//购物车商品价格合计
				that.goodsTotalPrice = 0;
				//购物车商品数量合计
				that.goodsTotalNumber = 0;
				that.hideShoppingCar();
			},
			hrefGoodsInfo(index) {
				this.goodsDetails = this.goodsList[index]
				this.goodsDetails.index = index
				this.getGoodsDetails()
			},
			// 获取商品详情介绍
			getGoodsDetails() {
				var path = '/xyb/supermarket/index/editor';
				var data = {
					id: this.goodsDetails.id,
					type: 1
				};
				ikz.requestPost(path, data, res => {
					console.log("获取商家详情介绍", res)
					if (res.data.code) {
						this.goodsDetails.content = res.data.data
						this.$refs.goodsDet.open()
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				})
			},
			touchStart(e) {

				this.touchData.clientX = e.changedTouches[0].clientX;

				this.touchData.clientY = e.changedTouches[0].clientY;
			},
		}
	}
</script>

<style lang="scss">
	//主题颜色
	$hx-theme-color: #FFC107;
	$hx-theme-color-light: #FFEB3B;
	
	.notice{
		margin: 16rpx;
		font-size: 28rpx;
	}
	
	.add {
		position: fixed;
		right: 60upx;
		top: 300upx;
		z-index: 999;
	}

	.ctn {

		/* border: 1px solid #e3e3e3; */
		width: 100%;
		display: flex;
		justify-content: flex-end;
		overflow: hidden;
		align-items: center;

		.searchCtn {
			display: flex;
			border-radius: 80upx;
			padding: 8upx 12upx;
			line-height: 44upx;
			background: #e0e0e0;
			overflow: hidden;
			align-items: center;
			min-width: 22px;
		}

		.leftBox {
			display: flex;
			width: 53px;
			justify-content: space-between;
			flex: none;
			margin: 0 8px;
		}

		.jrNull {
			/* #ifdef MP */
			width: 95px;
			flex: none;
			/* #endif */
		}
	}

	page {
		background: #ffffff;
	}

	.hx-bb {
		border-bottom: 1px solid $uni-border-color;
	}

	.hx-txt-10 {
		font-size: 18rpx;
	}

	.hx-txt-12 {
		font-size: 22rpx;
	}

	.hx-txt-14 {
		font-size: 25rpx;
	}

	.hx-txt-16 {
		font-size: 29rpx;
	}

	.hx-txt-18 {
		font-size: 33rpx;
	}

	.hx-txt-22 {
		font-size: 40rpx;
	}

	.hx-color-gray {
		color: #bbbbbb;
	}

	.hx-color-white {
		color: #FFFFFF;
	}

	.hx-color-black {
		color: #333333;
	}

	.hx-txt-weigth {
		font-weight: bold;
	}

	.hx-mb-10 {
		margin-bottom: 10px;
	}

	.hx-mt-15 {
		margin-top: 27rpx;
	}

	.hx-shadow {
		box-shadow: 0px 6upx 16upx rgba(173, 173, 173, 0.2);
	}
	
	.hx-number-box {
		position: relative;
		z-index: 10;
	}

	.miniBtn {
		position: relative;
		padding: 0 12px;
		border-radius: 20px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		background: linear-gradient(100deg, #FFEB3B, #FFC107);
		font-size: 18rpx;
		color: #333;

		.num {
			position: absolute;
			right: 0;
			top: -10px;
			width: 18px;
			height: 18px;
			line-height: 18px;
			font-size: 18rpx;
			color: #fff;
			background-color: #ff5722;
			text-align: center;
			border-radius: 50%;

		}
	}

	.hx-store {
		.header {
			display: flex;
			margin-top: 22rpx;
			padding: 22rpx;
			background-color: #ffffff;

			.left {
				margin-right: 22rpx;

				image {
					width: 175rpx;
					height: 175rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;

				.tit {
					font-weight: 600;
					font-size: 33rpx;
					line-height: 38rpx;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
				}

				.row {
					font-weight: 400;
					font-size: 26rpx;
					line-height: 28rpx;
					color: #979797;
					width: 100%;
				}

				.tag-box {
					display: flex;
					width: 100%;
					height: 28rpx;

					.tag-column {
						font-weight: 400;
						font-size: 20rpx;
						line-height: 24rpx;
						color: #FB7A26;
						padding: 2rpx 15rpx;
						background: #FFF2D9;
						border-radius: 15rpx;
						margin-left: 15rpx;

						&:first-child {
							margin: 0;
						}
					}
				}
			}
		}

		.container {
			margin: 0 32upx;
		}

		.tabs-box {
			width: 100%;
			position: sticky;
			top: 0;
			z-index: 10;
			background-color: white;
			border-bottom: 1px solid #efefef;
			height: 40px;

			.hx-tabs {
				position: relative;
				display: flex;
				height: 100%;
				
				.hx-tabs-item {
					width: 50%;
				}

				&-item {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 70px;
					color: #666666;

					text {
						font-size: 29rpx;
					}

				}

				&-active {
					color: #FB7A26;
					background: #FFEBDD;
				}

				&-slider-box {
					position: absolute;
					display: flex;
					justify-content: center;
					bottom: 0;
					width: 70px;
				}

				&-slider {
					display: flex;
					background: #f6d200;
					width: 30px;
					height: 3px;
				}
			}
		}

		.main {
			position: relative;
			background-color: #ffffff;

			#mainSwiper {
				background-color: #eeeeee;
				position: sticky;
				top: calc(40px + 44px + var(--status-bar-height));

				.scroll-items {

					// 商品列表样式
					.category-list {
						width: 100%;
						background-color: #fff;
						display: flex;
						padding-bottom: 50px;

						.left,
						.right {
							background: #fff;
							position: absolute;
							top: 0;
							bottom: 0upx;
						}

						.left {
							width: 24%;
							left: 0upx;
							background-color: #f6f3f3;

							.row {
								width: 100%;
								height: 45px;
								display: flex;
								align-items: center;
								overflow: hidden;
								position: relative;

								.text {
									width: 100%;
									font-size: 25rpx;
									color: #999999;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									text-align: center;
									padding: 0 29rpx;
								}

								&-number {
									position: absolute;
									width: 18px;
									height: 18px;
									right: 4px;
									top: 4px;
									background: #ff5722;
									border-radius: 50%;
									line-height: 18px;
									text-align: center;
									font-size: 18rpx;
									color: #ffffff;
								}

								&.active {
									height: 45px;
									background-color: #fff;

									.text {
										font-size: 25rpx;

									}
								}
							}

							.row:last-child {
								margin-bottom: 200upx;
							}
						}

						.right {
							width: 76%;
							left: 24%;

							.goodsListBox {
								padding-bottom: 100px;

								.category {
									//width: 94%;
									padding: 0 15px 10px 15px;

									.s-item {
										height: 45px;
										line-height: 45px;
										font-size: 29rpx;
										background: #ffffff;
										color: #555555;
										position: sticky;
										top: 0;
										z-index: 18;
									}

									.list:last-child {
										margin-bottom: 0;
									}

									.list {
										margin-bottom: 20px;
										width: 100%;
										display: flex;
										flex-wrap: wrap;

										.box:first-child {
											.m-store-item {
												margin-top: 0;
											}
										}

										.box {
											width: 100%;

											.m-store-item {
												display: flex;
												flex-direction: row;
												width: 100%;
												justify-content: space-between;
												margin-top: 15px;
												margin-bottom: 15px;

												.m-img {
													flex: 0 0 154rpx;
													height: 154rpx;
													border-radius: 7rpx;
												}

												.m-text {
													flex: 1;
													position: relative;
													padding: 0 11rpx;
													display: flex;
													align-content: space-between;
													flex-wrap: wrap;

													.m-title {
														font-size: 29rpx;
														color: #555555;
														font-weight: bold;
														display: -webkit-box;
														-webkit-box-orient: vertical;
														overflow: hidden;
														-webkit-line-clamp: 1;
														width: 100%;
													}

													.m-descripe {
														font-size: 22rpx;
														color: #999999;
														display: -webkit-box;
														-webkit-box-orient: vertical;
														overflow: hidden;
														-webkit-line-clamp: 2;
														width: 100%;
													}
													
													.m-bottom {
														display: flex;
														justify-content: space-between;
														width: 100%;
														align-items: center;
													}

													.m-price-box {
														font-weight: bold;
														display: flex;
														align-items: flex-end;
														width: 100%;

														.symbol {
															color: #ff582b;
															font-size: 22rpx;
														}

														.m-price {
															position: relative;
															top: 2px;
															font-size: 33rpx;
															color: #ff582b;
														}

														.m-old-price {
															margin-left: 3px;
															display: flex;
															flex-direction: row;
															font-size: 18rpx;
															color: #999999;
															margin-top: 5upx;
															text-decoration: line-through;
															font-weight: normal;
														}
													}

													.m-distance {
														position: relative;
														color: #b2b2b2;
														font-size: 20upx;
														text-align: right;

														.jumpPosition {
															position: absolute;
															bottom: 23px;
															right: 0;
															z-index: 2;
															width: 28px;
															height: 28px;
														}
													}

												}

											}
										}
									}
								}
							}
						}
					}
				}

				.evaluate-box {}

				.business-box {

					.info-list {
						background: #ffffff;
						padding: 15px;

						&-container {
							line-height: 36rpx;
							display: flex;
							flex-direction: row;

							[class*="hxicon-"] {
								color: #a2a2a2;
								margin-right: 8px;
							}

							text {
								font-size: 25rpx;
							}

							.right {
								float: right;
								color: #FB7A26;
								display: flex;
								flex-direction: row;
								align-items: center;

								[class*="hxicon-"] {
									color: #FB7A26;
									margin-right: 0;
									font-size: 29rpx;
								}
							}
						}
						
						.scroll-img {
							white-space: nowrap;
							overflow-x: auto;
							width: 100%;
							
							.column {
								width: 290rpx;
								height: 182rpx;
								border-radius: 9rpx;
								margin-left: 29rpx;
								
								&:first-child {
									margin-left: 0;
								}
							}
						}
					}
				}
			}

		}

		.foot {
			position: fixed;
			display: flex;
			z-index: 999;

			justify-content: center;
			align-items: center;
			bottom: 0;
			height: 100%;
			width: 100%;

			/*width: calc(100% - 32px);*/
			.btn-box {
				position: absolute;
				display: flex;
				bottom: 15px;
				justify-content: center;
				align-items: center;
				margin: 0;
				height: 50px;
				background: #222222;
				border-radius: 100upx;
				width: calc(100% - 32px);
				z-index: 9;

				&-left {
					height: 100%;
					flex: auto;
					display: flex;
					justify-content: flex-start;
					align-self: center;
					align-items: center;
					padding-left: 17rpx;

					.cart {
						position: relative;
						width: 36px;
						height: 36px;

						image {
							width: 100%;
							height: 100%;
						}

						.tag {
							position: absolute;
							right: -11rpx;
							top: -7rpx;
							height: 18px;
							width: 18px;
							background-color: #ff4000;
							color: #ffffff;
							border-radius: 50%;
							z-index: 1;
							font-size: 18rpx;
							text-align: center;
							line-height: 18px;
						}
					}

					.priceBox {
						flex: auto;
						margin-left: 22rpx;
					}

				}

				&-right {
					width: 154rpx;
					height: 100%;
					position: relative;
					display: flex;
					justify-content: flex-start;
					align-self: center;
					align-items: center;

					.pscj {
						width: 100%;
						height: 100%;
						border-top-right-radius: 100upx;
						border-bottom-right-radius: 100upx;
						background: #222222;
						text-align: center;
						display: flex;
						justify-content: center;
						align-self: center;
						align-items: center;
					}

					.jiesuan {
						width: 100%;
						height: 100%;
						font-size: 28upx;
						border-top-right-radius: 100upx;
						border-bottom-right-radius: 100upx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-self: center;
						align-items: center;
						background: linear-gradient(45deg, $hx-theme-color-light, $hx-theme-color);
						font-weight: bold;
						color: #222222;
					}
				}
			}

			.zz {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, .7);
				z-index: 1;
			}

			.cart-box {
				display: flex;
				justify-content: flex-start;
				flex-flow: column;
				background: #ffffff;
				position: absolute;
				bottom: 0;
				z-index: 2;
				max-height: 66%;

				padding-bottom: 62px;
				border-top-left-radius: 16px;
				border-top-right-radius: 16px;
				overflow: hidden;
				width: 100%;

				.rebate-box {
					height: 30px;
					background: #FFC107;
					color: #FF9900;
					text-align: center;
					line-height: 30px;
					font-size: 25rpx;
				}

				.box-container {
					box-sizing: border-box;
					padding: 0 16px;
				}

				.operating-box {
					font-size: 22rpx;
					line-height: 40px;
					height: 40px;
					border-bottom: 1px solid #f6f6f6;
					color: #666666;
					display: flex;
					flex-direction: row;

					&_right {
						flex: 1;
					}

					&_left {
						display: flex;
						flex-direction: row;
					}

				}

				.goods-box {
					height: 100%;
					overflow: hidden;
					flex: 1;
					display: flex;

					.goods-list-scroll {
						height: 100%;

						.goods-list {

							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.box {
								width: 100%;
								border-bottom: 1px solid #f6f6f6;
								box-sizing: border-box;
								padding: 0 16px;

								.m-store-item {
									display: flex;
									flex-direction: row;
									width: 100%;
									justify-content: space-between;
									padding-top: 15px;
									padding-bottom: 15px;

									.m-img {
										flex: 0 0 154rpx;
										height: 154rpx;
										border-radius: 7rpx;
									}

									.m-text {
										flex: 1;
										position: relative;
										padding: 0 6px;
										display: flex;
										align-content: space-between;
										flex-wrap: wrap;

										.m-title {
											width: 100%;
											font-size: 29rpx;
											color: #555555;
											font-weight: bold;
											display: -webkit-box;
											-webkit-box-orient: vertical;
											overflow: hidden;
											-webkit-line-clamp: 1;
										}

										.m-descripe {
											width: 100%;
											font-size: 22rpx;
											color: #999999;
											display: -webkit-box;
											-webkit-box-orient: vertical;
											overflow: hidden;
											-webkit-line-clamp: 2;
										}
										
										.m-bottom {
											width: 100%;
											display: flex;
											justify-content: space-between;
											align-items: center;
										}

										.m-price-box {
											height: 24px;
											font-weight: bold;
											display: flex;
											flex-direction: row;
											align-items: flex-end;

											.symbol {
												color: #ff582b;
												font-size: 22rpx;
											}

											.m-price {
												position: relative;
												top: 2px;
												font-size: 33rpx;
												color: #ff582b;
											}

											.m-old-price {
												margin-left: 3px;
												display: flex;
												flex-direction: row;
												font-size: 18rpx;
												color: #999999;
												margin-top: 5upx;
												text-decoration: line-through;
												font-weight: normal;
											}
										}

										.m-distance {
											position: relative;
											color: #b2b2b2;
											font-size: 20upx;
											text-align: right;

											.jumpPosition {
												position: absolute;
												bottom: 23px;
												right: 0;
												z-index: 2;
												width: 28px;
												height: 28px;
											}
										}

									}

								}
							}
						}
					}
				}
			}
		}
	}

	uni-popup {
		position: relative;
		z-index: 9999;
	}
	
	mp-html {
		width: 100%;
	}

	.goods-details {
		width: 600rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 36rpx;
		overflow: hidden;
		padding: 29rpx;
		
		.popup-img {
			width: 100%;
			height: 435rpx;
		}
		
		.popup-top {
			padding-top: 29rpx;
			
			.popup-title {
				font-weight: 600;
				font-size: 33rpx;
				line-height: 45rpx;
			}
			
			.popup-sale {
				font-weight: 400;
				font-size: 22rpx;
				line-height: 29rpx;
				color: #979797;
				margin: 15rpx 0;
			}
			
			.popup-cont {
				font-weight: 400;
				font-size: 25rpx;
				line-height: 36rpx;
				color: #979797;
			}
		}
		
		.popup-bottom {
			padding-top: 29rpx;
			margin-top: 12rpx;
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			
			.popup-price {
				font-weight: 600;
				line-height: 29rpx;
				color: #FF0000;
				font-size: 33rpx;
				
				text {
					font-size: 22rpx;
				}
			}
		
			.jumpPosition {
				position: absolute;
				top: -15rpx;
				right: 0;
				z-index: 2;
				width: 28px;
				height: 28px;
			}
		}
	}
	
	.numbox {
		display: flex;
		justify-content: flex-end;
		min-width: 155rpx;
		position: relative;
		z-index: 10;
		
		.numbox-plus {
			width: 45rpx;
			height: 45rpx;
		}
		
		.numbox-value {
			width: 50rpx;
			height: 45rpx;
			text-align: center;
			font-size: 26rpx;
			color: #222222;
			line-height: 45rpx;
		}
		
		.numbox-minus {
			width: 45rpx;
			height: 45rpx;
		}
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.form-main {

		display: flex;
		flex-direction: column;
		justify-content: left;
		padding: 15px;

		.form-main_ctn {
			display: flex;
			flex-direction: column;
			justify-content: left;
			padding: 23px 22px 22px 22px;
			background-color: #fff;
			border-radius: 8px;

			.godos_tit {
				margin-top: 4px;
				margin-bottom: 6px;
				font-size: 33rpx;
				font-weight: bold;
				color: #333;
			}

			.gg_tit {
				margin-top: 8px;
				font-size: 25rpx;
				font-weight: bold;
				color: #555;
			}

			.gg_box {
				margin-top: 8px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				font-size: 22rpx;
				color: #333;

				.item {
					margin-right: 25rpx;
					margin-bottom: 25rpx;
					border: 1px solid #f1f1f1;
					border-radius: 4px;
					padding: 4px 6px;
				}

				.item.active {
					border-color: #ffe081;
					background-color: #fff0b7;
				}

			}

			.select_gg {
				margin: 26px -12px 0;
				padding: 6px 12px;
				color: #999;
				background-color: #f9f9f9;
				display: flex;
				flex-direction: row;

				.lable {}

				.select_gg_box {
					flex: 1;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.gg-item {
						color: #333;

						.gg-item-cut {
							margin-left: 3px;
							margin-right: 3px;
						}
					}

					.gg-item:last-child {
						.gg-item-cut {
							display: none;
						}
					}
				}

			}

			.bottom {
				position: relative;
				display: flex;
				flex-direction: row;
				margin-top: 12px;

				.price_box {
					flex: 1;
					lign-items: baseline;
					color: #ff582b;
					font-size: 25rpx;
					position: relative;
					top: 4px;

					.price {
						font-size: 43rpx;
					}
				}

				.jumpPosition {
					position: absolute;
					right: 16px;
					top: 2px;
				}

				.form-btn-box {
					height: 30px;
					line-height: 30px;

					.add-btn {
						border-radius: 50px;
						background-color: #ffce3c;
						padding: 0 12px;
						display: flex;
						height: 30px;
						line-height: 30px;
						align-items: center;

						i {
							font-weight: bold;
							font-size: 33rpx;
							margin-right: 3px;
							margin-left: -4px;
						}

						text {

							font-size: 25rpx;
							font-weight: bold;
							color: #363636;
						}
					}
				}
			}

		}

		.close {
			position: absolute;
			left: 50%;
			margin-left: -20px;
			bottom: -70px;
			border-radius: 50%;
			height: 40px;
			width: 40px;
			background-color: #fff;
			opacity: 0.7;
			text-align: center;
			line-height: 43px;

			i {
				font-weight: bold;
				font-size: 40rpx;
			}
		}
	}
</style>
